<template>
    <div class="container" v-loading="userinfo.loading">
        <div class="person-info">
            <div class="avatar">
                <img :src="userinfo.avatar_url" alt="">
                <div class="info">
                    <span id="username">{{userinfo.loginname}}</span>
                    <div><label>积分:</label><span>{{userinfo.score}}</span></div>
                    <div><label>Github:</label><span>https://github.com/{{userinfo.githubUsername}}</span></div>
                    <div><label>注册时间:</label><span>{{userinfo.create_at | date}}</span></div>
                </div>
            </div>
        </div>

        <div class="replies">
            <label class="title">最近参与话题:</label>
            <div v-for="reply in userinfo.recent_replies">
                <div class="reply">
                    <div class="avatar">
                        <router-link :to="{name:'UserRoute',params:{name:reply.author.loginname}}">
                            <img :src="reply.author.avatar_url" alt="">
                        </router-link>
                        <router-link :to='{name: "ArticleRoute",params:{id:reply.id}}'>
                            <div class="title-info">{{reply.title}}</div>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>

        <div class="topics">
            <label class="title">最近发表话题:</label>
            <div v-for="topic in userinfo.recent_topics">
                <div class="avatar">
                    <router-link :to="{name:'UserRoute',params:{name:topic.author.loginname}}">
                        <img :src="topic.author.avatar_url" alt="">
                    </router-link>
                    <router-link :to='{name: "ArticleRoute",params:{id:topic.id}}'>
                        <div class="title-info">{{topic.title}}</div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
  export default {
    name: "user-com",
    data(){
      return {
        userinfo:{loading:true},
      }
    },
    methods:{
      refreshUser(path){
        this.$http({
          url:`https://cnodejs.org/api/v1${path}`,
          method:'get',

        }).then((res) =>{
          this.userinfo = res.data.data;

        }).catch((res) => {
          console.log("userroute error !" , res);
        })
      }
    },
    watch:{
      $route(to,from){

        this.refreshUser(to.path);
      }
    },
    beforeRouteUpdate(to,from,next){
      console.log(to.path);
      console.log("re")
      this.refreshUser(to.path);
      next();
    }
  }
</script>

<style scoped lang="less">
    .border{
        border:1px solid lightgrey;
        border-radius: 6px;
        overflow: hidden;
        background-color: #e3eef0;
    }
    .container{
        display:flex;
        flex-direction: column;
        width:60%;
        height:100%;
    }
    .person-info{
        .avatar,.info{
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
        }
        .avatar{
            padding:2rem;
            .border;
            img{
                width:10rem;
                height:10rem;
            }
            .info{
                margin-left:2rem;
                flex-direction: column;
                align-items:flex-start;
                p{
                    display: block;
                }
                #username{
                    line-height: 4rem;
                    font-size:24px;
                    color: #6cbf6c;
                }
                label{
                    font-size:20px;
                }
                label+span{
                    padding:0 1rem;
                    line-height:2rem;
                    font-weight: bold;
                }
            }
        }
    }
    .replies,.topics{
        .border;
        margin-top:2rem;
        padding:2rem;
        a{
            text-decoration: none;
            color:black;
            font-weight: bold;
        }
        .avatar{

            img{
                width:4rem;
                height:4rem;
            }
            .title-info{
                padding:0px 1rem;
                line-height: 4rem;
            }
            .border;
            margin-top:2rem;
            display: flex;
            border:none;
            background-color: #fffdfe;
        }

    }
</style>
